<template>
  <div class="userAccount">
    <payment-dialog ref="payDialog" pay-type="recharge" />
    <div class="top-part">
      <div class="card">
        <div class="card-con">
          <span class="label">现金账户</span>
          <div class="inline">
            <span class="unit font-colorRed">&yen;</span><span class="price font-colorRed">{{ parseInt(balance) }}</span>
            <span class="point font-colorRed">. {{ parseFloat(balance).toFixed(2).toString().split('.')[1] }}</span>
          </div>
          <a class="btn fr" @click="reChargeEvent">充值<svg-icon icon-class="icon_right" /></a>
        </div>
      </div>
    </div>
    <div class="middle-part">
      <div class="record">
        <div class="record-title title">
          <span class="timer">时间</span>
          <span class="nums">收支</span>
          <span class="balance">余额</span>
        </div>
        <van-list
          :offset="80"
          v-model="loading"
          :finished="finished"
          @load="getUserAccountLogListFn"
        >
          <div v-for="(item, index) in recordList" :key="index" class="record-table">
            <span class="timer">{{ item.pay_time }}</span>
            <span class="nums">
              {{ item.type == 1 ? '+' : '-' }}
              {{ Number(item.pay_fee).toFixed(getitem.item_price_p) }}
            </span>
            <span class="balance">&yen;{{ Number(item.after_number).toFixed(getitem.item_price_p) }}</span>
          </div>
        </van-list>
        <!-- todo:nodata-->
        <div v-if="recordList.length == 0 && !loading" class="noData small">
          <div class="content">
            <img src="../../../assets/images/noData/noDataRecord.png" alt="">
            <div class="text">暂无订单</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getUserAccountInfo, getUserAccountChangeList } from '@/api/balance'
import paymentDialog from '../../order/components/paymentDialog'
export default {
  name: 'Index',
  components: {
    paymentDialog
  },
  data() {
    return {
      payType: 'reCharge',
      recordList: [],
      balance: 0,
      loading: false,
      finished: false,
      getAllData: false,
      formData: {
        p: 1,
        limit: 10
      }
    }
  },
  computed: {
    ...mapGetters([
      'getitem'
    ])
  },
  created() {
    this.getUserAccountInfoFn()
  },
  methods: {
    // 充值按钮事件
    reChargeEvent() {
      this.$refs.payDialog.showDialog = true
    },
    // 获取余额信息
    getUserAccountInfoFn() {
      getUserAccountInfo().then(res => {
        const data = res.data
        if (data.status_code === 200) {
          this.balance = data.data.balance
        }
      })
    },
    // 资金变化记录
    getUserAccountLogListFn() {
      this.loading = true
      getUserAccountChangeList(this.formData).then(res => {
        this.loading = false
        const data = res.data
        if (data.status_code === 200) {
          const list = data.data.list
          const recordList = this.recordList
          const newArr = recordList.concat(list)
          this.recordList = newArr
          this.formData.p++
          if (newArr.length >= data.data.count) {
            this.finished = true
            this.getAllData = true
          }
        } else {
          this.recordList = []
          this.finished = true
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
  @import "src/styles/mixin.scss";
  .userAccount{
    .top-part{
      position: fixed;
      width: 100%;
      height: pxCalc(196px);
      background: url(../../../assets/images/blanceBg.png) center no-repeat;
      background-size: 100% auto;
      .card{
        position: relative;
        z-index: 11;
        width: pxCalc(352px);
        height: pxCalc(77px);
        margin: 0 auto;
        background: url(../../../assets/images/cardBg.png) center no-repeat;
        background-size: 100% auto;
        transform: translateY(148%);
        &-con{
          padding-top: pxCalc(18px);
          padding-left: pxCalc(23px);
          padding-right: pxCalc(20px);
          span{
            line-height: pxCalc(26px);
            display: inline-block;
          }
          .label{
            font-size: pxCalc(13px);
            color: #333333;
            margin-top: pxCalc(3px);
            margin-right: pxCalc(8px);
            vertical-align: top;
          }
          .inline{
            display: inline-block;
            margin-bottom: pxCalc(-3px);
            vertical-align: pxCalc(-3px);
            font-size: pxCalc(12px);
            .unit{
              margin-right: pxCalc(2px);
            }
            .point{
              font-weight: bold;
            }
            .price{
              font-size: pxCalc(25px);
              font-weight: bold;
            }
          }
          .btn{
            width: pxCalc(68px);
            height: pxCalc(34px);
            text-align: center;
            color: #fff;
            font-size: pxCalc(13px);
            padding-left: pxCalc(7px);
            /*line-height: pxCalc(25px);*/
            padding-top: pxCalc(3px);
            background: url(../../../assets/images/btnBg2.png) center no-repeat;
            background-size: 100% 100%;
            margin-top: pxCalc(3px);
          }
        }
      }
    }
    .middle-part{
      background-color: #fff;
      .record{
        padding-top: pxCalc(175px);
        width: pxCalc(335px);
        margin: pxCalc(-48px) auto 0;
        color: #949494;
        font-size: pxCalc(13px);
        &-title, &-table{
          line-height: pxCalc(50px);
          border-bottom: pxCalc(1px) solid #eee;
          white-space: nowrap;
          .timer{
            width: pxCalc(120px);
            display: inline-block;
          }
          .nums{
            display: inline-block;
            width: pxCalc(120px);
            text-align: left;
            padding-left: 12px;
          }
          .balance{
            width: pxCalc(150px);
            color: #ff0000;
            @include showEllipsis;
          }
        }
        .title{
          font-size: pxCalc(14px);
          color: #363b43;
          font-weight: bold;
          .timer{
            text-align: center;
          }
          .balance{
            color: #363b43;
          }
        }
      }
    }
  }
</style>
